<!--
 * @Author: lxj l18762185937@163.com
 * @Date: 2022-09-16 08:58:00
 * @LastEditors: lxj l18762185937@163.com
 * @LastEditTime: 2022-09-16 09:43:31
 * @FilePath: \9.16李雪军作业\my-work\src\views\LayoutView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu>
          <el-menu-item-group>
            <el-menu-item index="1">
              <router-link to="/" class="kl">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="/Layout/list" class="kl">列表</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <router-link to="/Layout/user" class="kl">我的管理</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h2>
            这是“
            <span class="jk">把伟大写在这里</span>
            ”的后端管理平台
          </h2>
        </el-header>
        <el-main><router-view /></el-main>
        <el-footer>Ant Design ©2018 Created by Ant UED</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped>
.jk {
  color: skyblue;
}
.kl {
  color: rgb(230, 227, 227);
}
.el-menu-item-group {
  height: 100vh;
  background-color: #000;
}

.is-active {
  background-color: #1890ff;
}

.el-menu-item-group li:hover {
  background-color: #1890ff;
}
</style>
